<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>座位平面图</title>
<style>
    body{
        background-color:darkslategray;
        font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    table{border-spacing: 10px 30px;}
    .row{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .showcase{
        background-color:olive;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        list-style-type: none;
        width: 70%;
        height: 7%;
        margin: 30px auto;
        padding: 5px 10px;
    }
    .showcase li{
        color:lightgray;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 10px;
    }

    .seat{
        background-color:darkgrey;
        width: 30px;
        height: 16px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        margin: 0px 3px;
    }


    .seat.occupied{
        background-color:floralwhite;
    }
    .seat.selected{
        background-color:salmon;
    }
    .seat.seatshow{
        background-color:salmon;

    }

    .seat:not(.occupied):hover{
        background-color: salmon;
        transform: scale(1.2);
        cursor:pointer;
    }
    .seat:not(.occupied):active{
        background-color: salmon;
        cursor:pointer;
    }
    .seat:nth-last-of-type(2){
        margin-left: 20px;
    }
    .seat:nth-last-of-type(6){
        margin-left: 20px;
    }
</style>

  <script>
      var number;
    function onclick_seat (number) {
    window.open("ManagerCommon.jsp?"+number,"number","height=400,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no");
    }
  </script>

</head>
<body>

<ul class="showcase">
    <li>
        <div class="seat"></div>
        <small>维修中</small>
    </li>
    <li>
        <div class="seat seatshow"></div>
        <small>空闲中</small>
    </li>
    <li>
        <div class="seat occupied"></div>
        <small>已预约</small>
    </li>
</ul>

<div class="seat-container">
<table>
    <tr>
      <div class="row">
        <td class="seat" onclick=onclick_seat("101")>101</td>
        <td class="seat">102</td>
        <td class="seat">103</td>
        <td class="seat occupied">104</td>
        <td class="seat">105</td>
        <td class="seat">106</td>
        <td class="seat occupied">107</td>
        <td class="seat">108</td>
        <td class="seat">109</td>
        <td class="seat">110</td>
      </div>
    </tr>
    <tr>
        <div class="row">
            <td class="seat">201</td>
            <td class="seat">202</td>
            <td class="seat">203</td>
            <td class="seat occupied">204</td>
            <td class="seat">205</td>
            <td class="seat">206</td>
            <td class="seat occupied">207</td>
            <td class="seat">208</td>
            <td class="seat">209</td>
            <td class="seat">210</td>
        </div>
    </tr>
    <tr>
        <div class="row">
            <td class="seat">301</td>
            <td class="seat">302</td>
            <td class="seat">303</td>
            <td class="seat occupied">304</td>
            <td class="seat">305</td>
            <td class="seat">306</td>
            <td class="seat occupied">307</td>
            <td class="seat">308</td>
            <td class="seat">309</td>
            <td class="seat">310</td>
        </div>
    </tr>
    <tr>
        <div class="row">
            <td class="seat">401</td>
            <td class="seat">402</td>
            <td class="seat">403</td>
            <td class="seat occupied">404</td>
            <td class="seat">405</td>
            <td class="seat">406</td>
            <td class="seat occupied">407</td>
            <td class="seat">408</td>
            <td class="seat">409</td>
            <td class="seat">410</td>
        </div>
    </tr>

    </table>
    </div>

</body>
</html>
